<template>
    <el-checkbox-group v-model="checkedList" class="group" @change="handleChange">
        <el-row :gutter="16">
            <el-col v-for="(item, index) in tableData" :key="index" :span="6" class="container">
                <div class="demo-image__preview container_img">
                    <div class="checked">
                        <el-checkbox :label="item.id"></el-checkbox>
                    </div>
                    <div v-show="item.is_radar" class="radar_icon"></div>
                    <div class="audio">
                        <div class="audio_container">
                            <div class="wave">
                                <img :src="getSuffixIcon(item.mediaFileInfo.name)" alt="" />
                            </div>
                            <div class="time">{{ item.mediaFileInfo.name }}</div>
                        </div>
                    </div>
                </div>

                <div class="container_text">
                    <div class="tag_box">
                        <el-popover
                            v-show="item.tagInfo.length > 0 || item.shareTagInfo.length > 0"
                            :width="300"
                            trigger="hover">
                            <template #reference>
                                <div class="zw-el-tags">
                                    <el-tag v-for="tag in getTags(item.tagInfo, item.shareTagInfo, 1)" :key="tag.id">
                                        {{ tag.name }}
                                    </el-tag>
                                </div>
                            </template>
                            <template #default>
                                <div class="zw-el-tags">
                                    <el-tag v-for="tag in getTags(item.tagInfo, item.shareTagInfo, 2)" :key="tag.id">
                                        {{ tag.name }}
                                    </el-tag>
                                </div>
                            </template>
                        </el-popover>
                    </div>
                    <div class="time">
                        <span>{{ item.created_at }}</span>
                        <span>上传者:{{ item.user_name }}</span>
                    </div>
                </div>
                <div class="iconList">
                    <template v-for="(icon, key) in item.compilesss" :key="key">
                        <div v-if="item.is_radar" v-auth="power[key]" class="icon_item" @click="selectItem(item, key)">
                            <el-tooltip class="box-item" effect="dark" :content="icon.content" placement="top">
                                <img
                                    :id="key.toString()"
                                    :src="`/static/material/compile${icon.isShow ? 'Red' : ''}Icon${key + 1}.png`"
                                    alt=""
                                    @mouseover="item.compilesss[key].isShow = true"
                                    @mouseout="item.compilesss[key].isShow = false" />
                            </el-tooltip>
                        </div>
                        <div
                            v-if="item.is_radar == 0 && key != 0"
                            v-auth="power[key]"
                            class="icon_item"
                            @click="selectItem(item, key)">
                            <el-tooltip class="box-item" effect="dark" :content="icon.content" placement="top">
                                <img
                                    :id="key.toString()"
                                    :src="`/static/material/compile${icon.isShow ? 'Red' : ''}Icon${key + 1}.png`"
                                    alt=""
                                    @mouseover="item.compilesss[key].isShow = true"
                                    @mouseout="item.compilesss[key].isShow = false" />
                            </el-tooltip>
                        </div>
                    </template>
                </div>
            </el-col>
        </el-row>
    </el-checkbox-group>

    <ShareConfiguration v-if="isShowConfiguration" :id="content_id" v-model:show="isShowConfiguration" :type="5" />
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useStore } from '@/store';
import bus from '@/utils/bus';
import { useRouter } from 'vue-router';
import { getSuffixIcon, downFile } from '@/utils/utils';
import useClipboard from 'vue-clipboard3';
import { ElMessage } from 'element-plus';
import ShareConfiguration from '@/components/common/ShareConfiguration.vue';

const router = useRouter();
const store = useStore();
const selectId = ref();
const selectIndex = ref();
const emit = defineEmits({
    isBatch: null,
    editItem: null
});
const checkedList = ref([]);
const props = defineProps(['tableData']);
const power = ref(['LOOK_DETAILS_FE', 'DEL_FE', 'DOW_FE', 'EDIT_FE']);
const isShowConfiguration = ref<boolean>(false);
const content_id = ref<number>(0);

const { toClipboard } = useClipboard();
// 多选
const handleChange = (value: string[]) => {
    const checkedCount = value.length;
    const checkAll = checkedCount === props.tableData.length;
    bus.emit('change', checkedList.value);
    bus.emit('autoCheckedAll', checkAll);
    store.dispatch('table', {
        tableData: checkedList
    });
};
const clearSelection = () => {
    bus.emit('change', []);
    bus.emit('autoCheckedAll', false);
    store.dispatch('table', {
        tableData: []
    });
    checkedList.value = [];
};

defineExpose({ clearSelection });

//合并
const getTags = (arr1: any, arr2: any, type: any) => {
    if (type == 1) {
        return arr1.concat(arr2).slice(0, 4);
    } else {
        return arr1.concat(arr2);
    }
};
// 全选
const checkAll = (value: any) => {
    if (value) {
        props.tableData.forEach((item: any) => {
            checkedList.value.push(item.id as never);
        });
        bus.emit('change', checkedList.value);
        store.dispatch('table', {
            tableData: checkedList,
            tableAll: true
        });
    } else {
        checkedList.value = [];
    }
};
//编辑
const ext = ref();
const selectItem = (item: any, key: any) => {
    const isPdf = item.mediaFileInfo.name.substring(item.mediaFileInfo.name.lastIndexOf('.')) == '.pdf';
    selectIndex.value = item.compilesss[key].name;
    item.compilesss[key].isShow = true;
    selectId.value = item.id;
    if (selectIndex.value == 'write') {
        const params = {
            media_content_id: item.id,
            type: 5,
            uploadVisib: true,
            title: '编辑文件',
            isPdf,
            isEdit: true
        };
        bus.emit('editItem', params);
    } else if (selectIndex.value == 'delete') {
        emit('isBatch', item.id);
    } else if (selectIndex.value == 'statistics') {
        router.push(`/content/basematerial/statement?id=${item.id}&title=${item?.mediaFileInfo?.name}`);
    } else if (selectIndex.value == 'copy') {
        if (item.is_radar) {
            content_id.value = item.id;
            isShowConfiguration.value = true;
        } else {
            onCopy(item.absolute_url);
        }
    } else {
        downFile(item.mediaFileInfo.absolute_url, item.mediaFileInfo.name);
        // clearSelection();
    }
};

// 复制
const onCopy = async (v: any) => {
    try {
        await toClipboard(v);
        ElMessage.success('复制成功');
    } catch (e) {
        ElMessage.error('复制失败');
    }
};

// 添加全选监听事件
bus.on('checkAll', checkAll);
onMounted(() => {
    store.dispatch('table', {
        tableData: [],
        tableAll: false
    });
});
// 修改 popover 样式
const style = reactive({
    display: 'flex',
    color: '#ff6b00',
    'flex-wrap': 'wrap'
});
const tagStyle = reactive({
    border: '1px solid #ffc69e',
    padding: '0 4px',
    'white-space': 'nowrap',
    'line-height': '22px',
    margin: '0 5px 10px'
});
</script>

<style lang="scss" scoped>
.container {
    padding: 8px;

    &_img {
        position: relative;

        .checked {
            position: absolute;
            left: 13px;

            :deep .el-checkbox__label {
                display: none;
            }
        }

        .radar_icon {
            position: absolute;
            top: 10px;
            right: 12px;
            width: 22px;
            height: 22px;
            background: url('@/assets/image/material/radar_red.png') no-repeat;
            background-size: 100%;
            z-index: 1;
        }

        .audio {
            border: 1px solid #eaeaea;
            border-bottom: none;
            padding: 41px 0 18px;

            &_container {
                // width: 280px;
                height: 42px;
                margin: 41px 0 18px;
                margin: 0 auto;
                border-radius: 22px;
                display: flex;

                // justify-content: space-around;
                align-items: center;

                .wave {
                    width: 60px;
                    height: 60px;
                    margin-left: 8px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .time {
                    font-size: 14px;
                    line-height: 18px;
                    font-weight: 300;
                    margin-left: 10px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }

    &_text {
        margin-top: -4px;
        padding: 10px;
        border: 1px solid #eaeaea;
        border-top: none;

        .tagList {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #ff6b00;
            margin-bottom: 10px;
            overflow: hidden;

            .tag_item {
                height: 22px;
                line-height: 22px;
                padding: 0 4px;
                background: #fff;
                border: 1px solid #ffc69e;
                border-radius: 2px;
                margin: 0 5px;
                cursor: pointer;
                white-space: nowrap;

                &:nth-child(n + 5) {
                    display: none;
                }
            }
        }

        .tag_box {
            height: 35px;
            overflow: hidden;
        }

        .describe {
            width: 286px;
            height: 14px;
            margin: 12px 0 8px;
            line-height: 14px;
            font-size: 14px;
            display: flex;
            align-items: center;

            &_text {
                display: inline-block;
                width: 255px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .time {
            display: flex;
            justify-content: space-between;
            line-height: 18px;
            color: #969696;
            font-weight: 300;
            font-size: 12px;
        }
    }

    .iconList {
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 2px;
        border: 1px solid #eaeaea;
        border-top: none;
        height: 40px;

        .icon_item {
            width: 19px;
            height: 19px;
            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>
